import React from 'react';
import { Row } from 'antd';

const CSS_SPLIT = { width: 2, height: 2, borderRadius: '50%', margin: '0 5px', backgroundColor: 'rgba(0, 0, 0, 0.65)' };
export default function DotSplit({ data, tag }) {
    if (!data || !data.length) {
        return null;
    }
    const showData = data.filter(_ => _);
    return (
        <Row type="flex" align="middle" style={{ flexWrap: 'nowrap' }}>
            {showData.map((item, index) => (
                // eslint-disable-next-line react/no-array-index-key
                <React.Fragment key={index}>
                    <div>{item}</div>
                    {index !== showData.length - 1 && <div style={CSS_SPLIT}></div>}
                </React.Fragment>
            ))}
            {tag && <div style={{ marginLeft: 12, lineHeight: '20px' }}>{tag}</div>}
        </Row>
    );
}
